<template>
<view class="container">
  <image class="logo" src="/static/img/logo.png"></image>
  <view class="title">手机号码验证</view>
  <view class="content">
    <view class="remark">为了更好的为您服务,请允许获取您的手机号码</view>
    <view class="remark">验证完成后,可领取现金红包</view>

    <view class="page-section">
        <view class="phonetxt">手机号:</view>
        <input class="phoneinput" v-model="phone" placeholder="输入手机号"/>
		<view v-if="sendShow" @click="sendCode" class="sendtrue">发送验证码</view>
        <view v-else class="sendtrue">{{sendTxt}}</view>
    </view>
    <view class="page-section">
        <view class="phonetxt">验证码:</view>
        <input class="phoneinput" v-model="phoneCode" placeholder="输入验证码"/>
    </view>


    <view class="buttomlist">
      <view class="nook" @click="back">返回</view>
      <view class="buttonTrue" v-if="addTrue" @click="phonesave">验证</view>
      <button class="buttonFalse" v-else>验证</button>
    </view>
  </view>
  
  <redContent v-if="redShow" @func="ruleBack"></redContent>
</view>
</template>
<script>
import request from '@/util/request.js'
import redContent from "@/components/redContent.vue"
export default {
	data() {
		return {
			phone:'',
			sendShow:true,
			addTrue:true,
			truePhone:'',
			wxCode:'',
			time:60,
			sendTxt:'',
			setInter:'',
			phoneCode:'',
			redShow:false
		}
	},
	components:{redContent},
	onShow(e){
		if(uni.getStorageSync('wxCode')){
			this.wxCode = uni.getStorageSync('wxCode')
			this.truePhone = uni.getStorageSync('truePhone')
			this.phone = uni.getStorageSync('truePhone')
		}
	},
	methods: {
		sendCode:function(){
			if(this.phone.length != 11){
				uni.showToast({
					title: '非法手机号码!!',
					icon: "none", 
					position:'bottom',
				});
			  return;
			}
			var that = this
			var data = {phone:this.phone}
			request({
				url: 'messageSend',
				method: 'post',
				data:data,
				success: (res) => {
					uni.showToast({
						title: res.data.msg,
						icon: "none", 
						position:'bottom',
					});
					if(res.data.code == 1){
						that.sendShow = false
						that.wxCode = res.data.data
						that.truePhone = that.phone
						uni.setStorageSync('truePhone',that.phone)
						uni.setStorageSync('wxCode',res.data.data)
						that.timeclear();
					}
				},
			})
		},
		timeclear:function(){
		    var that = this
		    this.time = 60
			this.sendTxt = '60s'
		    this.setInter = setInterval(function(){
				if(that.time == 0){
					that.sendShow = true
					clearInterval(that.setInter)
				}else{
					that.time--;
					that.sendTxt = that.time + 's'
				}
		    }, 1000);
		},
		phonesave:function(){
			var that = this
			if(!this.phoneCode){
				uni.showToast({
					title:'请输入验证码',
					icon: "none", 
					position:'bottom',
				});
			     return;
			}
			if(this.phoneCode != this.wxCode){
			    uni.showToast({
			        title:'验证码错误!!',
			        icon: "none", 
			        position:'bottom',
			    })
			    return;
			}
			this.addTrue = false
			var data ={
			  'phone':this.truePhone,
			  'uid':uni.getStorageSync('uid')
			}
			request({
				url: 'member/save',
				method: 'put',
				data:data,
				success: (res) => {
					if(res.data.code == 1){
						uni.removeStorageSync('truePhone')
						uni.removeStorageSync('wxCode')
						uni.showToast({
						    title:'验证成功!!',
						    icon: "none", 
						    position:'bottom',
						})
						that.redShow = true
					}
				},
			})
		},
		back:function(){
			uni.switchTab({
				url:'/pages/index/index'
			})
		},
		
	}
}
</script>
<style scoped>
.container{
  display: flex;
  width: 100%;
  height: 100%;
  padding-top:30rpx;
  flex-direction: column;  /* 子元素横向排列 */
  justify-content: center; 
  align-items: center; }
.logo{
  width:150rpx;height:155rpx;
}
.title{
  width:100%;
  padding-top:20rpx;
  border-bottom: 1px dashed #c0c0c0;
  border-top: 5px solid #d9d9d9;
  padding-bottom: 20rpx;
  text-align: center;
}
.remark{padding-left:5%;color:#404040;font-size:14px;}
.content{padding-top:20rpx;width:100%;}
.buttonTrue {
  width:40%;
  margin-top:30rpx;
  background: #44b549;
  font-size: .8rem;
  color: #FFF;
  text-align: center;
  height:100rpx;
  line-height: 100rpx;
  border-radius: 30rpx;
  margin-left:7%;
}
.buttonFalse {
  width:40%;
  margin-top:30rpx;
  background: #999999;
  font-size: .8rem;
  color: #FFF;
  text-align: center;
  height:100rpx;
  line-height: 100rpx;
  border-radius: 30rpx;
  margin-left:7%;
}

.nook{
  width:40%;
  margin-top:30rpx;
  background: #1a8dff;
  font-size: .8rem;
  color: #FFF;
  text-align: center;
  height:100rpx;
  line-height: 100rpx;
  border-radius: 30rpx;}



.buttomlist{
  width:100%;display: flex;flex-direction: row;
  padding-left:7%;
  margin-top:20rpx;
}
.phonecontent{
  position: fixed;
  top: 0;
  left: 0%;
  width: 100%;
  height: 100%;
  padding-top: 30%;
  padding-left: 5%;
  padding-right: 5%;
  background-color: black;
  z-index: 2001;
  background: rgba(0,0,0,0.7);
}
.phonebclass{
  width: 80%;
  z-index: 4001;
  background: #FFF;
  align-self: center;
  padding: 30rpx 5% 30rpx 5%;
  border-radius: 15rpx;
  }
.page-section{
  display:flex;
  padding:30rpx 0 0 30rpx;
}
.phonetj{width:50%;margin-top:20px;height:30px;line-height:30px;background: #44b549;}
.titlephone{text-align: center;margin-bottom: 50rpx;}
.phonetxt{font-size:14px;}
.phoneinput{font-size:13px;color:#999999;width:50%;border-bottom: 1px solid #999999;margin-left:15rpx;}
.sendtrue{background:#4da6ff;font-size:10px;color:#fff;height:25px;line-height:25px;margin-left:20rpx;width:70px;text-align: center;}
</style>


